
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont">&#xe644;</i>
                    <div class="name">首页</div>
                    <div class="code">&amp;#xe644;</div>
                    <div class="fontclass">.shouye</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe646;</i>
                    <div class="name">我的</div>
                    <div class="code">&amp;#xe646;</div>
                    <div class="fontclass">.wode</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe617;</i>
                    <div class="name">定位 (1)</div>
                    <div class="code">&amp;#xe617;</div>
                    <div class="fontclass">.dingwei1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe61f;</i>
                    <div class="name">收藏</div>
                    <div class="code">&amp;#xe61f;</div>
                    <div class="fontclass">.shoucang</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe61e;</i>
                    <div class="name">时间</div>
                    <div class="code">&amp;#xe61e;</div>
                    <div class="fontclass">.shijian</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe615;</i>
                    <div class="name">搜索</div>
                    <div class="code">&amp;#xe615;</div>
                    <div class="fontclass">.sousuo</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe619;</i>
                    <div class="name">返回 (1)</div>
                    <div class="code">&amp;#xe619;</div>
                    <div class="fontclass">.fanhui1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe61b;</i>
                    <div class="name">购物车</div>
                    <div class="code">&amp;#xe61b;</div>
                    <div class="fontclass">.gouwuche</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe61d;</i>
                    <div class="name">浏览</div>
                    <div class="code">&amp;#xe61d;</div>
                    <div class="fontclass">.liulan</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe61c;</i>
                    <div class="name">客服</div>
                    <div class="code">&amp;#xe61c;</div>
                    <div class="fontclass">.kefu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe651;</i>
                    <div class="name">我的订单</div>
                    <div class="code">&amp;#xe651;</div>
                    <div class="fontclass">.wodedingdan2</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe660;</i>
                    <div class="name">设置</div>
                    <div class="code">&amp;#xe660;</div>
                    <div class="fontclass">.shezhi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe664;</i>
                    <div class="name">皮衣</div>
                    <div class="code">&amp;#xe664;</div>
                    <div class="fontclass">.piyi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe67d;</i>
                    <div class="name">外套</div>
                    <div class="code">&amp;#xe67d;</div>
                    <div class="fontclass">.waitao</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe685;</i>
                    <div class="name">女童</div>
                    <div class="code">&amp;#xe685;</div>
                    <div class="fontclass">.nvtong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe680;</i>
                    <div class="name">鞋品</div>
                    <div class="code">&amp;#xe680;</div>
                    <div class="fontclass">.xiepin</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe684;</i>
                    <div class="name">女上衣</div>
                    <div class="code">&amp;#xe684;</div>
                    <div class="fontclass">.nvshangyi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe682;</i>
                    <div class="name">男上衣</div>
                    <div class="code">&amp;#xe682;</div>
                    <div class="fontclass">.nanshangyi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe670;</i>
                    <div class="name">衬衫</div>
                    <div class="code">&amp;#xe670;</div>
                    <div class="fontclass">.chenshanzhuanhuan</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe66f;</i>
                    <div class="name">包</div>
                    <div class="code">&amp;#xe66f;</div>
                    <div class="fontclass">.baozhuanhuan</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe678;</i>
                    <div class="name">夹克 </div>
                    <div class="code">&amp;#xe678;</div>
                    <div class="fontclass">.jiakezhuanhuan</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe677;</i>
                    <div class="name">斗篷</div>
                    <div class="code">&amp;#xe677;</div>
                    <div class="fontclass">.doupengzhuanhuan</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe676;</i>
                    <div class="name">内衣 </div>
                    <div class="code">&amp;#xe676;</div>
                    <div class="fontclass">.neiyizhuanhuan</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe672;</i>
                    <div class="name">长裤</div>
                    <div class="code">&amp;#xe672;</div>
                    <div class="fontclass">.changkuzhuanhuan</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe668;</i>
                    <div class="name">鞋包配饰</div>
                    <div class="code">&amp;#xe668;</div>
                    <div class="fontclass">.xiebaopeishizhuanhuan</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe66e;</i>
                    <div class="name">卫衣</div>
                    <div class="code">&amp;#xe66e;</div>
                    <div class="fontclass">.weiyizhuanhuan</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe66b;</i>
                    <div class="name">西装</div>
                    <div class="code">&amp;#xe66b;</div>
                    <div class="fontclass">.xizhuangzhuanhuan</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe66d;</i>
                    <div class="name">T恤 </div>
                    <div class="code">&amp;#xe66d;</div>
                    <div class="fontclass">.txuzhuanhuan</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe666;</i>
                    <div class="name">礼服 </div>
                    <div class="code">&amp;#xe666;</div>
                    <div class="fontclass">.lifuzhuanhuan</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe68a;</i>
                    <div class="name">套装</div>
                    <div class="code">&amp;#xe68a;</div>
                    <div class="fontclass">.taozhuang</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe67a;</i>
                    <div class="name">男装</div>
                    <div class="code">&amp;#xe67a;</div>
                    <div class="fontclass">.nanzhuangpeishizhuanhuan</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe681;</i>
                    <div class="name">女装</div>
                    <div class="code">&amp;#xe681;</div>
                    <div class="fontclass">.lianyiqun</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe67b;</i>
                    <div class="name">外套、大衣 </div>
                    <div class="code">&amp;#xe67b;</div>
                    <div class="fontclass">.dayizhuanhuan</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe673;</i>
                    <div class="name">裤装、单裤</div>
                    <div class="code">&amp;#xe673;</div>
                    <div class="fontclass">.kuzhuangzhuanhuan</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe675;</i>
                    <div class="name">毛衣、针织衫</div>
                    <div class="code">&amp;#xe675;</div>
                    <div class="fontclass">.maoyizhuanhuan</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe68d;</i>
                    <div class="name">删除 (2)</div>
                    <div class="code">&amp;#xe68d;</div>
                    <div class="fontclass">.shanchu2</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe692;</i>
                    <div class="name">分类</div>
                    <div class="code">&amp;#xe692;</div>
                    <div class="fontclass">.quanbu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe68c;</i>
                    <div class="name">删除 (1)</div>
                    <div class="code">&amp;#xe68c;</div>
                    <div class="fontclass">.shanchu1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe690;</i>
                    <div class="name">删除 (4)</div>
                    <div class="code">&amp;#xe690;</div>
                    <div class="fontclass">.shanchu4</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe695;</i>
                    <div class="name">定制款、可定制</div>
                    <div class="code">&amp;#xe695;</div>
                    <div class="fontclass">.dingzhikuankedingzhi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe696;</i>
                    <div class="name">全国包邮</div>
                    <div class="code">&amp;#xe696;</div>
                    <div class="fontclass">.quanguobaoyou</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe69c;</i>
                    <div class="name">充值</div>
                    <div class="code">&amp;#xe69c;</div>
                    <div class="fontclass">.chongzhi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe69a;</i>
                    <div class="name">笑脸、成功</div>
                    <div class="code">&amp;#xe69a;</div>
                    <div class="fontclass">.xiaolianchenggong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe69e;</i>
                    <div class="name">转账</div>
                    <div class="code">&amp;#xe69e;</div>
                    <div class="fontclass">.zhuanzhang</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe6a3;</i>
                    <div class="name">完成</div>
                    <div class="code">&amp;#xe6a3;</div>
                    <div class="fontclass">.wancheng</div>
                </li>
            
        </ul>


        <div class="helps">
            第一步：使用font-face声明字体
            <pre>
@font-face {font-family: 'iconfont';
    src: url('iconfont.eot'); /* IE9*/
    src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('iconfont.woff') format('woff'), /* chrome、firefox */
    url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
</pre>
第二步：定义使用iconfont的样式
            <pre>
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}
</pre>
第三步：挑选相应图标并获取字体编码，应用于页面
<pre>
&lt;i class="iconfont"&gt;&amp;#x33;&lt;/i&gt;
</pre>
        </div>

    </div>
</body>
</html>
